//para1:星星数目 ；默认值是5
//para2:星星的大小；默认值是30
//para3:评价的种类
function Stars(num,size,kind){
	this.num = num || 5 
	this.size = size  || 30
	this.kind = kind 
	//找到存放星星的容器   [data-kind=desciption]
	this.box = document.querySelector('[data-kind='+this.kind+']')
	
	//调用show方法展示星星
	this.show()
}

Stars.prototype.show = function(){
	for(var i = 0 ;i < this.num ;i ++){
		var star = document.createElement('img')
		star.style.width = this.size + 'px'
		star.style.height = this.size + 'px'
		//记录星星
		star.classList.add('star-'+this.kind)
		//记录星星的编号
		star.dataset.index = i 
		star.src = 'img/star-yellow.png'
		this.box.appendChild(star)
		star.onclick = this.click 
	}
	var scoreSpan = document.createElement('span')
	scoreSpan.classList.add('score-'+this.kind)
	scoreSpan.style.display = 'inline-block'
	scoreSpan.style.verticalAlign = 'top'
	scoreSpan.style.fontSize = '30px'
	scoreSpan.style.lineHeight = this.box.clientHeight + 'px'
	this.box.appendChild(scoreSpan)
	
	//添加一个隐藏的input标签
	//无法form提交分数
	var inputScore = document.createElement('input')
	inputScore.style.display = 'none'
	inputScore.name = this.kind
	this.box.appendChild(inputScore)
}

Stars.prototype.click = function(event){
	//找到所有同类的星星；
	var starClass = event.target.className
	var imgs = document.querySelectorAll('.'+starClass)
	for (var i = 0; i < imgs.length; i++) {
		if (i <= this.dataset.index) {
			//这个星星以及它前面的星星变为红星星;
			imgs[i].src = 'img/star-red.png'
		} else {
			//后面的变为黄星星;
			imgs[i].src = 'img/star-yellow.png'
		}
	}
	//star-attitude  ===> ['star','attitude'] split字符串拆分
	//score-attitude
	var spanClass = 'score-' + starClass.split('-')[1]
	var span = document.querySelector('.'+spanClass)
	span.innerHTML = parseInt(this.dataset.index) + 1 + '分'
	
	//修改input值为得分
	var input = document.querySelector('[name=' + starClass.split('-')[1] + ']')
	input.value = parseInt(this.dataset.index) + 1
}

//找到html文件中 含有 data-kind 属性的标签，创建星星
//var divs = document.querySelectorAll('[data-kind]')
//for(var i = 0 ;i < divs.length;i++){
//	var kind = divs[i].dataset.kind
//	new Stars(5,70,kind)
//}

//forEach：数组中每一个元素为参数，执行一次function
//slice():从数组中获取一个子数组，
//para1：起始位置；para2:结束位置

//divs是 NodeList类型，转化为数组Array，
//就可以使用数组的forEach方法

//调用array数组中的slice方法，
//修改this指向为nodelist可以把nodelist化为数组
var divs = document.querySelectorAll('[data-kind]')
Array.prototype.slice.call(divs).forEach(function(item){
	var kind = item.dataset.kind
	new Stars(5,70,kind)
})


//编程规范：
//每个方法，都实现一个小功能，尽量代码一屏幕可以显示完整；
//避免方法过长，逻辑复杂，不便理解。
//增强代码的可读性。










